<script lang="ts" setup>

import {useRoute} from 'vue-router'

let route = useRoute()


</script>

<template>
                  <div class="common-layout">
                    <el-container>
                    <el-header>欢迎你来到后台管理</el-header>
                    <el-container>
   
                        <el-aside width="200px">
                            <el-row class="tac">
     

                                    <el-col :span="24">
                                        
                                    <el-menu
                                        active-text-color="#ffd04b"
                                        background-color="#545c64"
                                        class="el-menu-vertical-demo"
                                        default-active="2"
                                        text-color="#fff"
                                        router
                                      
                                    >
                                        <!-- 首页 -->
                                    <el-menu-item index="/shouye">
                                        <el-icon><setting /></el-icon>
                                        <span>首页</span>
                                        </el-menu-item>
                                        <!-- 系统管理 -->
                                        <el-sub-menu index="1">
                                        <template #title>
                                            <el-icon><location /></el-icon>
                                            <span>系统管理</span>
                                        </template>
                                        <el-menu-item-group >
                                            <el-menu-item index="/zidian">字典管理</el-menu-item>
                                            <el-menu-item index="/yonghu">用户管理</el-menu-item>
                                            <el-menu-item index="/yonghuList">用户类表</el-menu-item>
                                        </el-menu-item-group>
                                       
                                       
                                        </el-sub-menu>
                                        <!-- 广告列表 -->
                                        <el-sub-menu index="2">
                                        <template #title>
                                            <el-icon><location /></el-icon>
                                            <span>广告位</span>
                                        </template>
                                        <el-menu-item-group >
                                            <el-menu-item index="/AdvertisingList">广告列表</el-menu-item>
                                           
                                        </el-menu-item-group>
                                       
                                       
                                        </el-sub-menu>

                                         <!-- 套餐分类和商品 -->
                                         <el-sub-menu index="3">
                                        <template #title>
                                            <el-icon><location /></el-icon>
                                            <span>套装管理</span>
                                        </template>
                                        <el-menu-item-group >
                                            <el-menu-item index="/CommodityList">套装分类</el-menu-item>
                                            <el-menu-item index="/Sahngpin">套装商品</el-menu-item>
                                           
                                        </el-menu-item-group>
                                       
                                       
                                        </el-sub-menu>

                                          <!-- 商品分类和商品 -->
                                          <el-sub-menu index="4">
                                        <template #title>
                                            <el-icon><location /></el-icon>
                                            <span>商品模块</span>
                                        </template>
                                        <el-menu-item-group >
                                            <el-menu-item index="/shangpinfen">商品分类</el-menu-item>
                                            <el-menu-item index="/shang">商品</el-menu-item>
                                            <el-menu-item index="/pinglun">评论</el-menu-item>
                                           
                                        </el-menu-item-group>
                                       
                                       
                                        </el-sub-menu>

                                         <!-- 订单类表和退货订单 -->
                                         <el-sub-menu index="5">
                                        <template #title>
                                            <el-icon><location /></el-icon>
                                            <span>订单</span>
                                        </template>
                                        <el-menu-item-group >
                                            <el-menu-item index="/dingdanList">订单类表</el-menu-item>
                                            <el-menu-item index="/dingdan">退货订单</el-menu-item>
                                            
                                           
                                        </el-menu-item-group>
                                       
                                       
                                        </el-sub-menu>
                                     
                                       
                                       
                                    </el-menu>
                                    </el-col>
  </el-row>
                        </el-aside>
                        <!-- 面包屑 -->
                        <el-container>
                        <el-main>
                            <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/shouye' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item v-for="(time,index) in route.matched.filter(item=>item.meta.title)" :key="index"
                            
                            ><a :href="time.path">{{ time.meta.title }}</a></el-breadcrumb-item
                            >
                           
                        </el-breadcrumb>
                            <router-view></router-view>
                        </el-main>
                        <el-footer>Footer</el-footer>
                        </el-container>

                    </el-container>
                    </el-container>
                </div>
</template>

<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;

}
.common-layout{
    height: 100vh;

}
html,body{
    height: 100vh;
    width: 100vw;
}
.el-aside{
    height: 100vh;
    .tac{
        height: 100%;
        .el-col-24{
            height: 100%;
            .el-menu-vertical-demo{
                height: 100%;

                
            }
        }
    }
}
.avatar-uploader-icon {
 border: 1px dashed #000 !important 
   
}
.is-vertical{
    height: 100vh;
    overflow: hidden;
}
.el-main{
    height: 100%;
   

    
}
.el-main::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
}

</style>
